<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="common/include :: header('编辑菜单')" />
    <th:block th:include="common/include :: font-css" />
    <style>
        body {
            background-color: #ffffff;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form" th:object="${sysMenu}">
    <input name="id"  type="hidden"  th:field="*{id}" />
    <div class="layui-form-item">
        <label class="layui-form-label required">菜单名称</label>
        <div class="layui-input-block">
            <input type="text" name="menuName" lay-verify="required" lay-reqtext="菜单名称不能为空" placeholder="请输入菜单名称" th:field="*{menuName}" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
         <label class="layui-form-label required">菜单编码</label>
         <div class="layui-input-block">
             <input type="text" name="code" lay-verify="unique_code" lay-reqtext="菜单编码不能为空" placeholder="请输入菜单编码" th:field="*{code}" class="layui-input">
         </div>
     </div>

     <div class="layui-form-item">
         <label class="layui-form-label required">上级菜单</label>
         <div class="layui-input-block">
             <input type="hidden" id="parentCode" name="parentCode" th:field="*{parentCode}" >
             <input type="text" id="parentName" name="parentName" lay-verify="required" lay-reqtext="上级菜单不能为空" th:value="${parentName}" class="layui-input">
         </div>
     </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">菜单类型</label>
        <div class="layui-input-block" id="menuType">
            <input type="radio" name="menuType" lay-verify="required" lay-reqtext="菜单类型不能为空" disabled="disabled">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">菜单url</label>
        <div class="layui-input-block">
            <input type="text" name="menuUrl" placeholder="请输入菜单url" th:field="*{menuUrl}" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">菜单排序</label>
        <div class="layui-input-block">
            <input type="text" name="sort" lay-verify="required|number" lay-reqtext="菜单排序不能为空" placeholder="请输入菜单排序" th:field="*{sort}" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">权限控制</label>
        <div class="layui-input-block">
            <input type="text" name="menuAuth" placeholder="请输入权限控制" th:field="*{menuAuth}" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">链接打开方式</label>
        <div class="layui-input-block">
            <select name="menuTarget" lay-filter="menuTarget" th:field="*{menuTarget}" th:switch="*{menuTarget}">
                <option value="_self" th:case="'_self'" th:selected="selected">页签</option>
                <option value="_blank" th:case="'_blank'" th:selected="selected">新窗口</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">菜单图标</label>
        <div class="layui-input-block">
            <input type="text" name="menuIcon" id="menuIcon" lay-filter="iconPicker" th:field="*{menuIcon}" style="display: none;"/>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label required">启用状态</label>
        <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|禁用"
                   th:checked="${sysMenu.status == '1' ? false : true}">
        </div>
    </div>

    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">备注信息</label>
        <div class="layui-input-block">
            <textarea name="remark" class="layui-textarea" placeholder="请输入备注信息" th:field="*{remark}"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
        </div>
    </div>
</div>
</div>
<th:block th:include="common/include :: footer" />

<script type="text/javascript" th:inline="javascript">
    // 用于从弹出层获取父菜单信息
    var MenuInfoDlg = {
        data: {
            parentCode:"",
            parentName:""
        }
    };

    layui.use(['iconPickerFa', 'form', 'layer'], function () {
        var iconPicker = layui.iconPickerFa,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //自定义验证规则
        form.verify({
            unique_code: function (value) {
                var checkResult = "";
                var oldCode = [[${sysMenu.code}]];
                if (value != oldCode) {
                    $.ajax({
                        type: 'GET',
                        url: ctx + 'sysMenu/verifyCode/',
                        data: {code: value},
                        async: false,
                        dataType: 'json',
                        success: function (res) {
                            if(res.success){
                                checkResult = res.msg;
                            }
                        }
                    });
                }
                return checkResult;
            }
        });

        // 点击父级菜单
        $('#parentName').click(function () {
            var treeUrl = encodeURIComponent("sysMenu/selectMenuTreeList");

            layer.open({
                type: 2,
                title: '父级菜单',
                area: ['300px', '400px'],
                content: ctx + 'sysMenu/menuTree?treeUrl=' + treeUrl,
                end: function () {
                    $("#parentCode").val(MenuInfoDlg.data.parentCode);
                    $("#parentName").val(MenuInfoDlg.data.parentName);
                }
            });
        });


        // 初始化图标选择
        iconPicker.render({
            // 选择器，推荐使用input
            elem: '#menuIcon',
            // fa 图标接口
            url: ctx + "lib/font-awesome-4.7.0/less/variables.less",
            // 是否开启搜索：true/false，默认true
            search: true,
            // 是否开启分页：true/false，默认true
            page: true,
            // 每页显示数量，默认12
            limit: 12,
            // 点击回调
            click: function (data) {
                // console.log(data);
            },
            // 渲染成功后的回调
            success: function (d) {
                // console.log(d);
            }
        });
        var icon = [[${sysMenu.menuIcon}]];
        iconPicker.checkIcon('iconPicker', icon);

        // 初始化菜单类型
        $.ajax({
            url: ctx + 'sysDict/listDictsByCode',
            type: 'POST',
            async: false,
            dataType: "json",
            data: {code : "MENU_TYPE"},
            success: function (res) {
                if(res.data.length > 0){
                    $("#menuType").html('');
                    for(var i=0; i<res.data.length; i++){
                        var name = res.data[i].dictLabel;
                        var value = res.data[i].dictValue;
                        var type = [[${sysMenu.menuType}]];
                        if(value == type){
                            $("#menuType").append('<input type="radio" name="menuType" value="' + value + '" title="' + name + '" checked>');
                        }else{
                            $("#menuType").append('<input type="radio" name="menuType" value="' + value + '" title="' + name + '">');
                        }
                    }
                    form.render();
                }
            }
        });

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            data.field.status = $("input[name='status']").is(':checked') == true ? 0 : 1;
            data.field.menuIcon = 'fa ' + (data.field.menuIcon == null ? 'fa-star' : data.field.menuIcon);
            var oldCode = [[${sysMenu.code}]];
            $.ajax({
                url: ctx + 'sysMenu/update/' + oldCode,
                type: 'POST',
                async: false,
                contentType: 'application/json; charset=UTF-8',
                dataType: "json",
                data: JSON.stringify(data.field),
                success: function (res) {
                    var index = layer.alert(res.msg, {
                        title: '提示信息'
                    }, function () {
                        // 重新加载列表
                        window.parent.location.reload();
                        // 关闭弹出层
                        layer.close(index);
                        var iframeIndex = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(iframeIndex);
                    });
                },
                error:function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.close(index);
                    if(XMLHttpRequest.status==404){
                        window.location.href="404";
                    }else{
                        layer.msg("服务器好像出了点问题！请稍后试试");
                    }
                }
            });

            return false;
        });

    });
</script>
</body>
</html>